import { computed } from "vue";
import { useStore } from "@/store";
import { LayoutSize, NavMode, RouterTrans, StyleMode } from "@model/store";

export default function () {
	const store = useStore();

	function getSetting<T = any>(key: string): T {
		return store.getters[`setting/${key}`];
	}

	function setSetting<T = any>(key: string, value: T) {
		store.dispatch("setting/SET_SETTING", { key, value });
	}

	const lang = computed<string>({
		get: () => getSetting("lang"),
		set: value => {
			setSetting("lang", value);
		},
	});

	const collapse = computed<boolean>({
		get: () => getSetting("collapse"),
		set: value => {
			setSetting("collapse", value);
		},
	});

	const layoutSize = computed<LayoutSize>({
		get: () => getSetting("layoutSize"),
		set: value => {
			setSetting("layoutSize", value);
		},
	});

	const openLogo = computed<boolean>({
		get: () => getSetting("openLogo"),
		set: value => {
			setSetting("openLogo", value);
		},
	});

	const keepHeader = computed<boolean>({
		get: () => getSetting("keepHeader"),
		set: value => {
			setSetting("keepHeader", value);
		},
	});

	const keepTabs = computed<boolean>({
		get: () => getSetting("keepTabs"),
		set: value => {
			setSetting("keepTabs", value);
		},
	});

	const openTabs = computed<boolean>({
		get: () => getSetting("openTabs"),
		set: value => {
			setSetting("openTabs", value);
		},
	});

	const uniqueOpened = computed<boolean>({
		get: () => getSetting("uniqueOpened"),
		set: value => {
			setSetting("uniqueOpened", value);
		},
	});

	const openBreadcrumb = computed<boolean>({
		get: () => getSetting("openBreadcrumb"),
		set: value => {
			setSetting("openBreadcrumb", value);
		},
	});

	const keepAside = computed<boolean>({
		get: () => getSetting("keepAside"),
		set: value => {
			setSetting("keepAside", value);
		},
	});

	const isHandleAsideFixed = computed<boolean>({
		get: () => getSetting("isHandleAsideFixed"),
		set: value => {
			setSetting("isHandleAsideFixed", value);
		},
	});

	const navMode = computed<NavMode>({
		get: () => getSetting("navMode"),
		set: value => {
			setSetting("navMode", value);
		},
	});

	const styleMode = computed<StyleMode>({
		get: () => getSetting("styleMode"),
		set: value => {
			setSetting("styleMode", value);
		},
	});

	const routerTrans = computed<RouterTrans>({
		get: () => getSetting("routerTrans"),
		set: value => {
			setSetting("routerTrans", value);
		},
	});

	const asideMixinFixed = computed<boolean>({
		get: () => getSetting("asideMixinFixed"),
		set: value => {
			setSetting("asideMixinFixed", value);
		},
	});

	const mixinInverted = computed<boolean>({
		get: () => getSetting("mixinInverted"),
		set: value => {
			setSetting("mixinInverted", value);
		},
	});

	const menuSegmentation = computed<boolean>({
		get: () => getSetting("menuSegmentation"),
		set: value => {
			setSetting("menuSegmentation", value);
		},
	});

	return {
		lang,
		collapse,
		layoutSize,
		openLogo,
		keepHeader,
		keepTabs,
		openTabs,
		uniqueOpened,
		openBreadcrumb,
		keepAside,
		isHandleAsideFixed,
		navMode,
		styleMode,
		routerTrans,
		asideMixinFixed,
		mixinInverted,
		menuSegmentation,
	};
}
